<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进一步理解纹理映射</title>
    <script src="lib/webgl-debug.js"></script>
    <script src="lib/webgl-utils.js"></script>
    <script src="lib/cuon-utils.js"></script>
    <script src="lib/cuon-matrix.js"></script>
</head>

<body onload="main()">
    <canvas width="800" height="800" id="canvas"></canvas>
</body>
<script>
    var vs = `
    attribute vec4 position;
    attribute vec2 texcoord;
    varying vec2 coord;
    void main(){
        gl_Position = position;
        coord = texcoord;
    }
    `
    var fs = `
    precision mediump float; 
    uniform sampler2D sampler; 
    varying vec2 coord; 
    void main(){ 
       gl_FragColor = texture2D(sampler,coord); 
    }`

    var gl;
    var canvas;

    function main() {
        canvas = document.getElementById("canvas");
        gl = getWebGLContext(canvas);
        draw();
    }

    function draw() {
        if (!gl) {
            console.log("无法获取上下文对象");
            return;
        }

        if (!initShaders(gl, vs, fs)) {
            console.log("初始化着色器失败");
            return;
        }

        var n = initVertexBuffers();
        initTextures(n);
    }

    function initVertexBuffers() {
        //声明顶点数据
        var vertexDatas = new Float32Array([-0.5, 0.5, 0.9, 1, //左上角点，采样反转y轴
            0.5, 0.5, 1, 1, //右上角 ，采样反转y轴
            -0.5, -0.5, 0, 0, //左下角， 采样反转y轴
            0.5, -0.5, 1, 0, //右下角,采样反转Y轴
        ]);


        //创建缓冲区对象
        var vertexBuffer = gl.createBuffer();
        //绑定缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        //往缓冲区写入顶点数据
        gl.bufferData(gl.ARRAY_BUFFER, vertexDatas, gl.STATIC_DRAW);
        //获取着色器变量
        var position = gl.getAttribLocation(gl.program, "position");
        var size = vertexDatas.BYTES_PER_ELEMENT;
        //将缓冲区分配给顶点属性
        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, size * 4, 0);
        gl.enableVertexAttribArray(position);

        var texcoord = gl.getAttribLocation(gl.program, "texcoord");
        gl.vertexAttribPointer(texcoord, 2, gl.FLOAT, false, size * 4, size * 2);
        gl.enableVertexAttribArray(texcoord);

        return 4;

    }

    function initTextures(n) {
        //创建纹理对象
        var texture = gl.createTexture();
        // 获取储存纹理变量的位置
        var sampler = gl.getUniformLocation(gl.program, "sampler");
        //创建image对象，并绑定加载完成事件
        var image = new Image();
        image.onload = function() {
            loadTexture(gl, n, texture, sampler, image);
        }
        image.src = "./image/1.png";
        return true;
    }

    function loadTexture(gl, n, texture, sampler, image) {
        //对纹理图像进行y轴反转
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
        //开启0号纹理对象
        gl.activeTexture(gl.TEXTURE0);
        //向目标绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D, texture);
        //配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
            //配置纹理图像
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
        //将0号纹理传递个着色器
        gl.uniform1i(sampler, 0);

        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
    }
</script>

</html>